<template>
  <div class="box" v-bind:style="{
                   height: viewInfo.heightMain - viewInfo.zlRouterTabs - 16 +'px',
                   width:viewInfo.widthMain -16 + 'px',
                   marginTop: -(viewInfo.heightMain - viewInfo.heightHeader)/2 + viewInfo.zlRouterTabs - 8 + 'px',
                   marginLeft: -(viewInfo.widthMain - viewInfo.widthAside)/2 + 8 + 'px' }">
      <el-container>
        <el-header v-bind:style="{height: '60px'}"
                   class="el-header-zl-panel"
                   v-if="$slots.zlPanelHeader">
          <div class="box-header">
            <slot name="zlPanelHeader">

            </slot>
          </div>
        </el-header>

        <el-main class="el-main-zl-panel">
          <div class="box-body">
            <el-container>

              <el-aside v-bind:style="{height: viewInfo.heightMain - viewInfo.zlRouterTabs - 16 - 4 - 8 +'px'}"
                        width="260px"
                        v-if="$slots.zlLPanelBodyHeader"
                        class="el-aside-zl-menus">
                <vue-scroll :ops="ops">
                  <!--<el-card class="box-card">-->
                    <slot name="zlLPanelBodyHeader" v-if="$slots.zlLPanelBodyHeader">

                    </slot>
                    <slot name="zlLPanelBody" v-if="$slots.zlLPanelBody">

                    </slot>
                  <!--</el-card>-->
                </vue-scroll>
              </el-aside>

              <el-main v-bind:style="{height: viewInfo.heightMain - viewInfo.zlRouterTabs - 16 - 4 - 8 +'px'}"
                       v-if="$slots.zlRPanelBody"
                       class="el-main-zl-menus">
                <vue-scroll :ops="ops">
                  <!--<el-card class="box-card">-->
                    <slot name="zlRPanelBody">

                    </slot>
                  <!--</el-card>-->
                </vue-scroll>
              </el-main>
              <template  v-else>
                <el-header v-if="$slots.tableHeader"
                           v-bind:style="{height:50 +'px'}">
                  <slot name="tableHeader"></slot>
                </el-header>
                <el-main v-if="$slots.tableMain"
                         v-bind:style="{height: viewInfo.heightMain - viewInfo.zlRouterTabs - 16 - 30 - 50 - 4 - 8 +'px'}"
                         class="el-main-zl-else">
                  <slot name="tableMain"></slot>
                </el-main>
                <el-footer v-if="$slots.tableFooter"
                           v-bind:style="{height:30 +'px'}">
                  <slot name="tableFooter"></slot>
                </el-footer>
              </template>
            </el-container>
          </div>
        </el-main>
      </el-container>
  </div>
</template>
<script type="text/javascript">
import { mapGetters } from 'vuex'
import comOps from '../../../config/opsVueScroll'

export default{
  name: 'ZlPanel',
  props: {
    title: {
      type: String
    }
  },
  data () {
    return {
      // 滚动设置
      ops: {
        ...comOps
      },
      menuTree: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id'
      }
    }
  },
  created () {

  },
  methods: {

  },
  computed: {
    ...mapGetters({
      viewInfo: 'permission/viewInfo'
    })
  }
}
</script>
<style scoped>
  .box{
    overflow-y: hidden;
    overflow-x: hidden;
    border: 2px solid rgba(255, 255, 255, 0.64);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0px 0px 2px #888888;
    position:absolute;
    top: 50%;
    left:50%;
  }

  .el-header-zl-panel {
    text-align: left;
    line-height: 60px;
    padding: 0 6px;
  }
  .el-main-zl-panel {
    padding: 6px;
  }
  .el-aside-zl-menus {
    border: 2px solid rgba(255, 255, 255, 0.64);
    box-shadow: 0px 0px 2px #888888;
  }

  .el-main-zl-menus {
    padding: 0px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.64);
    box-shadow: 0px 0px 2px #888888;
  }
  .box-card {
    border: 0px;
  }

  .el-main-zl-else {
    padding: 0px;
    border: 2px solid rgba(255, 255, 255, 0.64);
    box-shadow: 0px 0px 2px #888888;
  }

</style>
